<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 共同样式 -->
    <link rel="stylesheet" href="<%= BASE_URL %>reset.css">
    <script src="//at.alicdn.com/t/c/font_3686270_b6dsrtrddel.js"></script>
    <title>登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .icon {
            width: 14%;
            height: 100%;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }

        .left {
            float: left;
        }

        .bg {
            /* background-color: rgba(66, 66, 66, .4); */
            z-index: 0;
        }

        .login {
            position: relative;
            top: 35px;
            width: 550px;
            height: 550px;
            margin: auto auto;
            text-align: center;
            padding: 15px;
            background-color: rgba(255, 255, 255, .5);
            border: 1px solid #66Afe9;
            z-index: 999;
        }

        .login h1 {
            margin-bottom: 50px;
        }

        .login .login_table {
            width: 90%;
            height: 55px;
            line-height: 50px;
            margin-left: 28px;
            margin-bottom: 45px;
            text-align: center;
            vertical-align: middle;
            border: 1px solid #b5d9f7;
            border-radius: 4px;
            /* background-color: aqua; */
        }

        .login .login_table input {
            width: 76%;
            height: 95%;
            text-align: center;
            font-size: 1.4em;
            border-radius: 4px;
            border: 1px solid transparent;
            color: #6a6f77;
            background-color: transparent;
            -web-kit-appearance: none;
            -moz-appearance: none;
            display: block;
            padding: 0 1em;
            text-decoration: none;
            outline: 0;
        }

        .login .login_table span {
            font-size: 9px;
            color: #898a8b;
        }

        input:focus {
            border-color: #66Afe9 !important;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, .6);
        }

        .login button {
            width: 90%;
            height: 45px;
            font-size: 1.4em;
            line-height: 45px;
            margin-top: 20px;
            margin-bottom: 40px;
            background-color: #c3e1f9;
            border: 1px solid #b5d9f7;
        }

        .login .login_tip {
            position: absolute;
            bottom: 120px;
            left: 150px;
        }

        .login .login_bottom {
            position: absolute;
            bottom: 35px;
            left: 190px;
        }

        .login .login_bottom>span {
            margin-right: 15px;
        }

        .bottom {
            position: absolute;
            width: 100%;
            height: 336px;
        }

        .bottom .bottom_bg1 {
            float: left;
            width: 100%;
            height: 336px;
            background: url(@/assets/login/bg1.png) no-repeat;
            z-index: 997;
        }

        .bottom .bottom_bg2 {
            float: left;
            position: relative;
            left: 0;
            bottom: 632px;
            width: 100%;
            height: 570px;
            background: url(@/assets/login/bg2.png) no-repeat;
            opacity: .3;
            z-index: 998;
        }

        .bottom .bottom_bear {
            position: relative;
            width: 200px;
            height: 100px;
            background: url(@/assets/login/bear.png) no-repeat;
            /* 我们元素可以添加多个动画， 用逗号分隔 */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }

        @keyframes bear {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -1600px 0;
            }
        }

        @keyframes move {
            0% {
                left: 0;
            }

            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>
    <div class="bg">
        <!-- 登录主体 -->
        <div class="login">
            <form action="">
                <h1>登录</h1>
                <div class="login_table">
                    <svg class="icon icon-back left" aria-hidden="true">
                        <use xlink:href="#icon-shouji"></use>
                    </svg>
                    <input type="tel" name="" id="" placeholder="请输入手机号">
                    <span>提示：请输入正确的手机号</span>
                </div>
                <div class="login_table">
                    <svg class="icon icon-back left" aria-hidden="true">
                        <use xlink:href="#icon-mima"></use>
                    </svg>
                    <input type="password" name="" id="" placeholder="请输入不小于8位数字的密码">
                    <span>提示：请输入大于8位并且小于16位字母数字组合的密码</span>
                </div>
                <button type="submit">登录</button>
            </form>
            <div class="login_tip"><input type="radio" name="" id=""><span>我已阅读并同意《XXX》、《XXX》</span></div>
            <div class="login_bottom">
                <span>忘记密码</span>
                <span>|</span>
                <span>新用户注册</span>
            </div>
        </div>
        <!-- 熊的动图 -->
        <div class="bottom">
            <div class="bottom_bg1"></div>
            <div class="bottom_bg2"></div>
            <div style="height: 200px;"></div>
            <div class="bottom_bear"></div>
        </div>
    </div>
</body>

</html>